<!--
 * @Title: 视频缩略图组件
 * @Description: 获取视频文件，并读取文件一帧作为缩略图，存入indexDb每次只需要查库
 * @version: 1.0.0
 * @Author: wzs
 * @Date: 2023-04-20 09:13:59
 * @LastEditors: wzs
 * @LastEditTime: 2023-04-20 16:23:08
-->
<template>
  <div class="video-img">
    <el-image :src="url" fit="contain" lazy style="height: 60px">
      <svg slot="placeholder" class="svgicon" aria-hidden="true">
        <use :xlink:href="'#icon-shipin-mov_mp4_avi'"></use>
      </svg>
      <svg slot="error" class="svgicon" aria-hidden="true">
        <use :xlink:href="'#icon-shipin-mov_mp4_avi'"></use>
      </svg>
    </el-image>
    <div class="play-btn" v-if="url">
      <i class="fa fa-play"></i>
    </div>
  </div>
</template>
<script>
import { Video } from 'video-metadata-thumbnails'
import panUtil from '@/utils/common'
import indexDb from '@/utils/indexDb'
export default {
  data() {
    return {
      url: '',
      controller: new AbortController(),
      db: null,
    }
  },
  props: {
    fileId: '',
  },
  async created() {
    // console.log(this.db)
  },
  methods: {
    getPreviewUrl: panUtil.getPreviewUrl,
    async getVideoPreviewUrl(fileId) {
      try {
        const videoMain = this.getPreviewUrl(fileId)
        const data = await fetch(videoMain, {
          signal: this.controller.signal,
        })
        const blob = await data.blob()
        const video = new Video(blob)
        const thumbnails = await video.getThumbnails({
          quality: 0.1,
          start: 0,
          end: 0,
        })
        if (thumbnails) {
          // return window.URL.createObjectURL(thumbnails[0].blob)
          // console.log(thumbnails[0].blob)
          return thumbnails[0].blob
        }
      } catch (error) {}
    },
    blobToDataURI(blob, callback) {
      var reader = new FileReader()
      reader.readAsDataURL(blob)
      reader.onload = function (e) {
        callback(e.target.result)
      }
    },
  },
  watch: {
    fileId: {
      async handler(val) {
        const _this = this
        if (val) {
          _this.db = await indexDb.openDB('videoImg', 'videoImgStore', 1)
          const img = await indexDb.getDataByKey(this.db, 'videoImgStore', val)
          if (img) {
            _this.url = img.url
            indexDb.closeDB(_this.db)
          } else {
            const blob = await _this.getVideoPreviewUrl(val)
            if (blob) {
              _this.blobToDataURI(blob, function (result) {
                // console.log(result)
                _this.url = result
                const data = {
                  id: val,
                  url: result,
                }
                indexDb.addData(_this.db, 'videoImgStore', data)
                indexDb.closeDB(_this.db)
                _this.controller.abort()
              })
            }
          }
        }
      },
      immediate: true,
    },
  },
}
</script>
<style lang="scss" scoped>
.video-img {
  height: 60px;
  font-size: 60px;
  overflow: visible;
  // img {
  //   display: block;
  // }
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    border-radius: 100%;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px !important;
    i {
      font-size: 16px !important;
      margin-left: 3px;
    }
  }

  .el-image {
    display: flex;
    overflow: visible;
    :deep(img) {
      border: 1px solid #eee;
    }
  }
  .svgicon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    // overflow: hidden;
    margin-right: 0;
  }
}
</style>
